import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Form, Input, Button, Pagination, Modal, message,Select } from 'antd'
import { EditOutlined, LinkOutlined, FontSizeOutlined, LockOutlined,UnorderedListOutlined  } from '@ant-design/icons'
import './resource.less'
import TopNav from '../top_nav'
import BottomBar from '../bottom_bar'
import ResourceItem from './resource_item'
import MyCategory from '../../components/mycategory'
import {getMemberInfo} from '../../utils/auth'
import resourceApi from '../../api/resource'
import categoryApi from '../../api/category'
class Resource extends Component {

  state = { 
    isModalVisible: false,
    pageNum:1,
    pageSize:10,
    total:0,
    key:'',
    categoryId:'',
    resourceList:[],
    categoryTitle:'',
    categoryList:[]
  }
  componentDidMount() {
    window.scrollTo(0, 0)
    this.getCategoryList()
    const { key, categoryId, pageNum,pageSize } = this.state
    this.getResourceList(key, categoryId, pageNum,pageSize)
  }
  getCategoryList = ()=>{
    categoryApi.list().then(res=>{
      if(res.success){
        this.setState({
          categoryList:res.data.data
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }
  getResourceList = (key, categoryId, pageNum, pageSize) => {
    resourceApi.queryList({ key, categoryId, pageNum, pageSize }).then(res => {
      if (res.success) {
        this.setState({
          resourceList: res.data.records,
          total: res.data.total
        })
      }
    }).catch(err => {
      console.log(err);
    })
  }
  // 查询方法
  onSearch = (event) => {
    this.setState({
      key:event
    })
    this.getResourceList(event,this.state.categoryId,this.state.pageNum,this.state.pageSize)
  }
  // 修改页码
  onPageChange = (current, pageSize) => {
    this.getResourceList(this.state.key,this.state.categoryId,current,pageSize)
  }
  // 点击类别查询
  changeCategory = (data) => {
    this.setState({
      categoryId: data.categoryId,
      categoryTitle: data.categoryTitle
    })
    this.getResourceList(this.state.key,data.categoryId,this.state.pageNum,this.state.pageSize)
  }
  // 显示发布资源弹框
  showPublishModel = () => {
    if(!getMemberInfo().id) return message.warning("请先登录")
    this.setState({ isModalVisible: true })
  }
  // 取消发布
  handleCancel = () => {
    this.setState({ isModalVisible: false })
  }
  // 上传资源
  uploadResource = (data) => {
    let memberId = getMemberInfo().id
    let jsonData = {memberId,...data}
    resourceApi.publish(jsonData).then(res=>{
      if(res.success){
        message.success("上传资源成功")
        this.setState({
          isModalVisible: false
        })
      }
    }).catch(err=>{
      console.log(err);
    })
  }

  render() {
    const { isModalVisible, pageNum,total,resourceList,categoryTitle,categoryList} = this.state
    return (
      <div className="resource-container">
        {/* 顶部 */}
        <TopNav style={{ background: '#fff', color: '#666' }} active="/resource" />
        {/* 内容 */}
        <div className="resource-box">
          <div className="resource-left">
            <header>
    <div className="header-left">全部 {categoryTitle ? '>'+categoryTitle :'' }（{total}）</div>
              <div className="header-right">
                <Input.Search placeholder="搜索资源" onSearch={this.onSearch} enterButton />
              </div>
            </header>
            <ul>
              {
                resourceList.map(item=>{
                  return <ResourceItem key={item.id} url={item.url} code={item.code}>{item.title}</ResourceItem>
                })
              }
            </ul>
          </div>
          <div className="page-box">
            <Pagination
              onChange={this.onPageChange}
              defaultCurrent={pageNum}
              total={total}
            />
          </div>
          <div className="resource-right">
            <MyCategory title="资源" changeCategory={this.changeCategory}>
              <Button icon={<EditOutlined />} type="primary" block onClick={this.showPublishModel}>发布资源</Button>
            </MyCategory>
          </div>
        </div>
        {/* 底部 */}
        <BottomBar style={{ background: '#f9f9f9', borderTop: '1px solid #e5e5e5' }} />
        {/* 发布资源弹框 */}
        <Modal title="发布资源" visible={isModalVisible} onCancel={this.handleCancel} footer={false}>
          <Form
            onFinish={this.uploadResource}
          >
            <Form.Item
              name="title"
              rules={[{ required: true, message: '资源名称不能为空!' }]}
            >
              <Input prefix={<FontSizeOutlined className="site-form-item-icon" />} placeholder="资源名称" />
            </Form.Item>
            <Form.Item
              name="url"
              rules={[{ required: true, message: '资源链接不能为空!' }]}
            >
              <Input prefix={<LinkOutlined className="site-form-item-icon" />} placeholder="资源链接" />
            </Form.Item>
            <Form.Item
              name="code"
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />} placeholder="提取码" />
            </Form.Item>
            <Form.Item
              name="categoryId"
            >
              <Select placeholder="所属分类" >
                   <Select.Option value="">-请选择-</Select.Option>
                   
                   {categoryList.map(item=>{
                     return <Select.Option key={item.id} value={item.id}>{item.title}</Select.Option>
                   })}
                </Select>
            </Form.Item>
            <Form.Item>
              <div style={{width:'100%',textAlign:'right'}}>
                <Button style={{marginRight:'20px'}} onClick={this.handleCancel}>取 消</Button>
                <Button type="primary" htmlType="submit" className="login-form-button">发 布</Button>
              </div>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
export default withRouter(Resource)
